<template>
	<div>
        <div class="leaveWrap" v-if="leaverList.length>0" style="z-index: 2000;">
        	<div class="leave">
        		<div class="leave_title">全部留言 • {{allList.length}}</div>          		
        		<div>
	        		<div class="section"  v-for="(item,index) in leaverList" :key="index">
	        			<div class="head">
	        				<div class="h1">
	        					<img :src="item.avatar" alt=""  v-if="item.avatar" class="itemImg" @click="clickFun(2,item)"
	        			    	:data-disNickname="item.disNickname"
	        			    	:data-disParentid="item.disParentid"	        			    	
	        			    	:data-disUid="item.disUid"
	        			    	:data-disId="item.disId"/>
	        					<img src="../../../../static/img/lanhu/45.png" alt="" v-else class="itemImg" @click="clickFun(2,item)"
	        			    	:data-disNickname="item.disNickname"
	        			    	:data-disParentid="item.disParentid"	        			    	
	        			    	:data-disUid="item.disUid"
	        			    	:data-disId="item.disId"/>
	        				</div>
	        			    <div class="h2 parentItem"  @click="clickFun(3,item)"
	        			    	:data-disNickname="item.disNickname"
	        			    	:data-disParentid="item.disParentid"	        			    	
	        			    	:data-disUid="item.disUid"
	        			    	:data-disId="item.disId"	        			    		        			    	
	        			    	>
	        			    	{{item.disNickname}}
	        			    </div>
	        			    <div class="h3" @click="fabulous(item)">
	        			    	<img src="../../../../static/img/lanhu/47.png" alt="" v-if="item.disIsPraise==0" 
	        			    		style="width: 13px;height: 13px;margin-right: 4px;"/>
	        			    	<img src="../../../../static/img/lanhu/50.png" alt="" v-if="item.disIsPraise>0" 
	        			    		style="width: 13px;height: 13px;margin-right: 4px;"/>
	        			    	<span style="flex: 1;">
	        			    		<span v-if="item.disCount>0">({{item.disCount}})</span>			        			    		
	        			    	</span>	
	        			    </div>
	        			</div>
	        			<div class="body">        			
	        			    <div class="b1 parentItem"  @click="clickFun(3,item)"
	        			    	:data-disNickname="item.disNickname"
	        			    	:data-disParentid="item.disParentid"	        			    	
	        			    	:data-disUid="item.disUid"
	        			    	:data-disId="item.disId">
                               {{item.disTxt}}
	        			    </div>       				
	        			</div>
	        			<div class="foot">
	        			    <div class="f1 parentItem" @click="clickFun(3,item)"
	        			    	:data-disNickname="item.disNickname"
	        			    	:data-disParentid="item.disParentid"	        			    	
	        			    	:data-disUid="item.disUid"
	        			    	:data-disId="item.disId">
	        			    	{{timeago(item.disAddtime)}}
	        			    </div>    				
	        			</div>
	        			
	        			
	        		    <div class="sub" v-if="item.children.length>0">
	        		    	<div class="subWrap" v-for="(item1,index1) in item.children">
	        		    		<div class="head">
			        				<div class="h1">
			        					<img :src="item1.avatar" alt="" v-if="item1.avatar" class="itemImg" @click="clickFun(2,item)"
			        			    	:data-disNickname="item1.disNickname"
			        			    	:data-disParentid="item1.disParentid"	        			    	
			        			    	:data-disUid="item1.disUid"
			        			    	:data-disId="item1.disId"/>
			        					<img src="../../../../static/img/lanhu/45.png" alt="" v-else class="itemImg"  @click="clickFun(2,item)"
			        			    	:data-disNickname="item1.disNickname"
			        			    	:data-disParentid="item1.disParentid"	        			    	
			        			    	:data-disUid="item1.disUid"
			        			    	:data-disId="item1.disId"/>
			        				</div>
			        			    <div class="h2 parentItem" @click="clickFun(3,item1)"
		        			    	:data-disNickname="item1.disNickname"
		        			    	:data-disParentid="item1.disParentid"	        			    	
		        			    	:data-disUid="item1.disUid"
		        			    	:data-disId="item1.disId">			        			    	
		        			    	{{item1.disNickname}}
			        			    </div>
			        			    <div class="h3" @click="fabulous(item1)">
			        			    	<img src="../../../../static/img/lanhu/47.png" alt="" v-if="item1.disIsPraise==0" 
			        			    		style="width: 13px;height: 13px;margin-right: 4px;"/>	
			        			    	<img src="../../../../static/img/lanhu/50.png" alt="" v-if="item1.disIsPraise>0" 
			        			    		style="width: 13px;height: 13px;margin-right: 4px;"/>	
			        			    	<span style="flex: 1;">
			        			    		<span v-if="item1.disCount>0">({{item1.disCount}})</span>			        			    		
			        			    	</span>	
			        			    </div>
	        		    		</div>
			        			<div class="body" >        			
			        			    <div class="b1 parentItem" @click="clickFun(3,item1)"
		        			    	:data-disNickname="item1.disNickname"
		        			    	:data-disParentid="item1.disParentid"	        			    	
		        			    	:data-disUid="item1.disUid"
		        			    	:data-disId="item1.disId">
                                      <span v-if="item1.disGid">回复{{item1.disGnickname}} : </span>{{item1.disTxt}}
			        			    </div>       				
			        			</div>
			        			<div class="foot" >
			        			    <div class="f1 parentItem" @click="clickFun(3,item1)"
			        			    	:data-disNickname="item1.disNickname"
			        			    	:data-disParentid="item1.disParentid"	        			    	
			        			    	:data-disUid="item1.disUid"
			        			    	:data-disId="item1.disId">
			        			    	{{timeago(item1.disAddtime)}}
			        			    </div>    				
			        			</div>		        			
	        		    	</div>
	        		            		    
	        		    </div>	        			
	        		</div>	        		
        		</div>
        	    <div class="more" v-if="more">
        	    	<van-button  size="small" 
        	    		round type="default" class="moreBtn"        	    		 
        	    		 @click="getMore">
        	    		<div style="display: flex;align-items: center;justify-content: center;height: 100%;">加载更多</div>
        	    	</van-button>
        	    </div>
        	    <div class="noMore" v-if="noMore">没有更多了</div>
        	</div>
        </div>
        <div class="noLeaveWrap" v-if="leaverList.length==0" style="z-index: 2000;">
        	<div style="background: #fff;">
	        	<div class="noLeaveWrap_title" @click="clickFun(5)">全部留言</div> 
	        	<div style="padding: 70px 0 60px;text-align: center;font-size: 13px;color: #e5e5e5;" @click="clickFun(5)">
                                        还没有评论，快来发表你的意见吧…
	        	</div>
	        	<div class="leave_btn" >
	        		<span  id="leaveBtn" style="cursor: pointer" @click="clickFun(1)">评论</span>
	        	</div>
        	</div>
        </div>        
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  more:false,    // 用于是否显示 加载更多
       	  noMore:false, // 用于是否显示 没有更多
       	  userId:0,
       	  params:{
       	  	comId:'',   
       	  	userId:''
       	  },
          leaverList:[], // 初始化的时候只显示2条数据
          allList:[],    // 用于保存所有的评论
          url5:this.$api+'/marketorderservice/api/v1/market/listDiscuss', // 留言列表
       	  url2:this.$api+'/marketorderservice/api/v1/market/goodsAddRelation' ,
       	  url3:this.$api+'/marketorderservice/api/v1/market/goodsMinusRelation',
       	  pageSize:5
       }
	},
	methods: {	
        clickFun(type,item){
        	this.$emit('clickFun',type,item)
        },
		// 点赞
		fabulous(obj){	
			let that=this
			let url=obj.disIsPraise>0?this.url3:this.url2
			let params={
				typeId:obj.disId,
				userId:this.userId,
				relationtype:4
			}
		    this.$Axios.Post(url,params)
		    .then(function(res) {
		      let test=obj.disIsPraise==0?'点赞成功':'已取消点赞'
              that.$toast(test)
              if(obj.disParentid=='0'){
              	for(var i=0;i<that.allList.length;i++){
              		if(obj.disId==that.allList[i].disId){
              			that.allList[i].disIsPraise=that.allList[i].disIsPraise>0?0:1
              			that.allList[i].disCount=that.allList[i].disIsPraise>0?++that.allList[i].disCount:--that.allList[i].disCount
              		    break;
              		}
              	}
              }else{
              	for(var i=0;i<that.allList.length;i++){
                   if(obj.disParentid==that.allList[i].disId) {
                   	   for(var j=0;j<that.allList[i].children.length;j++){
                   	   	  if(obj.disId==that.allList[i].children[j].disId){
                   	   	  	that.allList[i].children[j].disIsPraise=that.allList[i].children[j].disIsPraise>0?0:1
                   	   	  	that.allList[i].children[j].disCount=that.allList[i].children[j].disIsPraise>0?++that.allList[i].children[j].disCount:--that.allList[i].children[j].disCount
                            break;
                   	   	  }
                   	   }
                   }
              	}              	
              }             
		    })				
		},
	    // 获取评论信息详情
	    getLeaverList(){
	      	let that=this
		    this.$Axios.Post (this.url5,this.params)
		    .then(function(res) {
		       that.leaverList=[]
		       that.allList=res.list	
		        // 如果不满2条主评论
		       if(res.list.length<=that.pageSize){
		       	  that.leaverList=res.list
		       	  that.more=false
		       }
		       // 如果多余2条主评论
		       else{
		       	  for(var i=0;i<that.pageSize;i++){
		       	  	that.leaverList.push(res.list[i])
		       	  }
		       	  that.more=true
		       }
		    })			    	
	    },
	    // 添加评论 不要改变原来的加载更多的状态
	    getLeaverListAdd(){
	      	let that=this
		    this.$Axios.Post (this.url5,this.params)
		    .then(function(res) {
		       that.leaverList=[]
		       that.allList=res.list
		       if(res.list.length<=that.pageSize){
		       	 that.leaverList=res.list
		       }else{
		       	  if(that.more){
			       	  for(var i=0;i<that.pageSize;i++){
			       	  	that.leaverList.push(res.list[i])
			       	  }		       	  	
		       	  }else{
		       	  	that.leaverList=res.list
		       	  }
		       }
		    })		    	
	    },
	    // 发送评论成功后 局部更新页面
	    addLeaver(){	 
            this.getLeaverListAdd()
	    },
	    // 加载更多
	    getMore(){
           	this.leaverList=this.allList  
           	this.more=false;
           	this.noMore=true
	    }
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.params.comId=this.$router.currentRoute.query.comId;
		this.params.userId=this.$router.currentRoute.query.userId;
		this.getLeaverList()
	}
}	
</script>

<style scoped="">
/*留言*/
.leaveWrap{padding:10px 0;background: #f2f2f2;}
.leave{background: #fff;}

.leave_title{padding: 10px 15px;font-size: 16px;
font-weight: bold;border-bottom: 1px solid #f2f2f2;}
.section{border-bottom: 1px solid #f2f2f2;
padding: 10px 15px 0px}
.head,.sub_head{display: flex;} 
.head .h1>img{width: 24px;height: 24px;border-radius: 4px;}
.h3{width: 35px;display: flex;justify-content: center;align-items: center;}
.h2{flex: 1;padding-left: 10px;font-weight: bold;}
.h1{width: 24px;}
.b1{padding-left: 34px;}
.f1{padding:10px 0 10px 34px;color: #999;}
.sub{padding-left: 34px;}
.subWrap{padding: 10px 0;border-top: 1px solid #f2f2f2;}



.noLeaveWrap{padding:10px 0;background: #f2f2f2;}
.noLeaveWrap_title{padding: 10px 15px;font-size: 16px;
font-weight: bold;border-bottom: 1px solid #f2f2f2;}
.leave_btn{padding: 15px 0 25px;text-align: center;}
.leave_btn>span{display: inline-block;
padding: 9px 15px;background: #FFD630;font-size: 13px;font-weight: bold;}

.more{text-align: center;padding: 10px;}
.moreBtn{width: 40%;}
.noMore{text-align: center;padding: 10px;color: #999;}
</style>